<template>
    <span>
        <Button size="small" @click="handleAlarmNoticeDetailShow(data)">详情</Button>
        <Modal v-model="alarm_notice_detail_modal" title="告警通知详情" width="75"> 
            <Form :label-width="100">
                <FormItem label="通知来源">
                    <AppLabel :app_id="alarm_notice_current.app_id"></AppLabel>
                </FormItem>
                <FormItem label="通知类型">
                    <Tag v-if="alarm_notice_current.notice_type == 'email'" color="blue">邮箱</Tag>
                    <Tag v-if="alarm_notice_current.notice_type == 'sms'" color="green">短信</Tag>
                    <Tag v-if="alarm_notice_current.notice_type == 'dingtalk'" color="yellow">钉钉</Tag>
                    <Tag v-if="alarm_notice_current.notice_type == 'weixin'" color="cyan">微信</Tag>
                </FormItem>
                <FormItem label="通知目标">
                    <span>{{ alarm_notice_current.notice_target }}</span>
                </FormItem>
                <FormItem label="通知生产时间">
                    <span>{{ alarm_notice_current.notice_time }}</span>
                </FormItem>
                <FormItem label="通知内容">
                    <div style="margin-bottom: 5px;min-height: 10vh;max-height:50vh;overflow-y: auto;border: 1px solid #dcdee2;border-radius: 4px;padding: 5px;background:#e7f1fc">
                        <pre style="line-height: 24px;margin:0px;"><code v-html="alarm_notice_current.notice_content"></code></pre>
                    </div>
                </FormItem>
                <FormItem label="通知状态">
                    <Tag v-if="alarm_notice_current.notice_sent == 1" color="green">已发送</Tag>
                    <Tag v-else-if="alarm_notice_current.notice_sent == 2" color="red">发送失败</Tag>
                    <span v-else>未发送</span>
                </FormItem>
            </Form>
        </Modal>
    </span>
</template>

<script>
import AppLabel from './AppLabel.vue';

export default {
    name: 'AlarmNoticeDetialButton',
    components: {
        AppLabel
    },
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            alarm_notice_detail_modal: false,
            alarm_notice_current: this.data
        }
    },
    methods: {
        handleAlarmNoticeDetailShow(row) {
            this.alarm_notice_current.app_id = row.app_id;
            this.alarm_notice_current.notice_type = row.notice_type;
            this.alarm_notice_current.notice_target = row.notice_target;
            this.alarm_notice_current.notice_time = row.notice_time;
            this.alarm_notice_current.notice_content = row.notice_content;
            this.alarm_notice_current.notice_sent = row.notice_sent;
            this.alarm_notice_detail_modal = true;
        }
    }
}
</script>